<template>
    <div class="slider-demo-block">
        <div style="width: 100%">年份：{{ value }}</div>
        <el-slider :min="props.min" :max="props.max" v-model="modelValue" show-input size="large"/>
    </div>
</template>

<script lang="ts" setup>
const props = withDefaults(defineProps<{
    min?: number;
    max?: number;
    value?: number;
}>(), {
    min: 1,
    max: 100,
    value: 1,
});
const modelValue = ref();
const emit = defineEmits<(e: 'update:value', value: number) => void>();
watch(() => modelValue.value, () => {
    emit('update:value', unref(modelValue));
});
onMounted(() => {
    modelValue.value = props.value;
});
</script>
<style scoped>
.slider-demo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
}

.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 12px;
}
</style>
